<template>
  <div>
    <t-sticky>
      <t-navbar
        title="绑定手机"
        :fixed="false"
        left-arrow
        @left-click="handleBack"
      />
    </t-sticky>
    <div class="warrper">
      <div class="tip">请填写您希望绑定的手机号</div>
      <div class="info-box">
        <t-input
          label=""
          type="number"
          v-model="phoneNumber"
          placeholder="请输入手机号"
        >
          <template #prefixIcon>
            <img class="icon" src="@/assets/login/phone.png" />
          </template>
        </t-input>
      </div>
      <div class="info-box">
        <t-input
          v-model="sms"
          type="number"
          label=""
          placeholder="请输入验证码"
        >
          <template #prefixIcon>
            <img class="icon" src="@/assets/login/code.png" />
          </template>
          <template #suffix>
            <div class="suffix">
              <div class="suffix--line"></div>
              <div class="verify" aria-role="button" @click="onSendSms">
                {{ smsTxt }}
              </div>
            </div>
          </template>
        </t-input>
      </div>
      <div class="btn-box">
        <t-button class="btn" size="large" @click="onSubmit">确定</t-button>
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive, toRefs, onUnmounted } from "vue";
import loginApi from "@/api/loginApi";
import { useRouter } from "vue-router";
import { Toast } from "tdesign-mobile-vue";
const router = useRouter();
let timer = null;
const state = reactive({
  phoneNumber: "",
  sms: "",
  smsTxt: "发送验证码",
  smsTime: 60,
});
const { smsTxt, phoneNumber, sms } = toRefs(state);
// 返回上一页
const handleBack = () => {
  router.back();
};
// 发送验证码
function onSendSms() {
  if (state.smsTime === 60) {
    getCode();
  }
}
// 检查手机号是否被注册
const existPhone = async () => {
  const result = await loginApi.phoneIsUse({ phone: state.phoneNumber });
  const isBind = result.data;
  if (isBind) {
    Toast({
      duration: 800,
      message: "手机号已被绑定",
    });
  }
  return isBind;
};
const getCode = async () => {
  if (state.phoneNumber == "") {
    Toast({
      duration: 800,
      message: "请输入手机号码",
    });
    return;
  }
  if (!/^1[3-9]\d{9}$/.test(state.phoneNumber)) {
    Toast({
      duration: 800,
      message: "手机号码格式不正确",
    });
    return;
  }
  const isBind = await existPhone();
  if (!isBind) {
    timer = setInterval(() => {
      if (state.smsTime > 0) {
        state.smsTime--;
        state.smsTxt = state.smsTime + "s";
      } else {
        state.smsTime = 60;
        state.smsTxt = "发送验证码";
        clearInterval(timer);
      }
    }, 1000);
    const result = await loginApi.sendMsg(state.phoneNumber);
    if (result.code === 0) {
      Toast({
        duration: 800,
        message: "验证码发送成功",
      });
    } else {
      Toast({
        duration: 800,
        message: result.msg,
      });
    }
  }
};
// 绑定手机号
async function onSubmit() {
  const res = await loginApi.bindPhone({
    phone: state.phoneNumber,
    msg: state.sms,
  });
  if (res.code == 0) {
    Toast({
      duration: 800,
      message: "绑定成功",
    });
    setTimeout(() => {
      handleBack();
    }, 1000);
  } else {
    Toast({
      duration: 800,
      message: res.msg,
    });
  }
}
onUnmounted(() => {
  if (timer) {
    clearInterval(timer);
  }
});
</script>
<style lang="scss" scoped>
::v-deep(.t-input) {
  padding: 16px 0;
  border-bottom: 1px solid $be9-color;
  background-color: transparent;
}
.warrper {
  .tip {
    font-size: 14px;
    text-align: left;
    color: $b6c-color;
    padding-left: 16px;
    padding-bottom: 10px;
  }
  .info-box {
    padding: 0 16px;
  }
  .icon {
    width: 20px;
  }
  .verify {
    color: $parm-c-color;
  }
  .btn-box {
    padding: 16px;
    .btn {
      width: 100%;
      font-size: 16px;
      @extend .btn-bg;
    }
  }
}
</style>
